<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import mapData from '../../../json/map/china.json'// 引入中国地图矢量数据
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            //1. ECharts最基本的代码结构
            //2. 准备数据, 设置给series下的data
            //3. 将type的值设置为gauge
            let myEchart = echarts.init(this.$refs.main);

            var option = {
                series: [
                    {
                        type: 'gauge',
                        data: [
                            {
                                value: 65,
                                itemStyle: { // 指针的样式
                                    color: 'pink' // 指针的颜色
                                }
                            }, // 每一个对象就代表一个指针
                            // {
                            //     value: 85,
                            //     itemStyle: {
                            //         color: 'green'
                            //     }
                            // }
                        ],
                        min: 50 // min max 控制仪表盘数值范围
                    }
                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
        console.log(mapData);
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

